import React, { Component } from "react";
import Button from "../../../component/button/index";
import AgreeCheckbox from "../../../component/agreeCheckbox/index";
import { connect } from "react-redux";
import { InputItem } from "antd-mobile";
import "./index.scss";
import yhTools from "../../../tools/yh";
import themeUtil from "../../../tools/theme";

/**
 * 二要素组件
 */
@connect(state => ({
	ocrInfo: state.livenessReducer,
	mobile: state.getAppPlatformsDatas.mobile
}))
class XhfCertification extends Component {
	constructor(props) {
		super(props);
		this.state = {
			userName: "",
			idCard: "",
			isRead: false,
			headerBanner: "",
			spaceID: "",
			inputDisabled: false
		};
	}
	componentWillReceiveProps = nextProps => {
		//props 更新
		const {
			headerBanner,
			userName,
			idCard,
			inputDisabled
		} = nextProps.pageParams;
		this.setState({
			headerBanner
		});
		if (
			nextProps !== this.props &&
			nextProps.pageParams.userName != "" &&
			nextProps.pageParams.idCard != ""
		) {
			this.setState({
				userName,
				idCard,
				inputDisabled
			});
		}
	};
	componentDidMount = () => {
		if (window.YHAuthorize) {
			window.YHAuthorize.View.addEventListener(
				"KeyboardEvent",
				this.keyboardEvent,
				false
			);
		}
		let _tempRandom = Math.round(Math.random() * 1000000);
		this.setState({
			spaceID: _tempRandom
		});
	};
	componentWillUnmount() {
		if (window.YHAuthorize) {
			window.YHAuthorize.View.removeEventListener(
				"KeyboardEvent",
				this.keyboardEvent,
				false
			);
		}
	}
	keyboardEvent = obj => {
		const id = document.activeElement.getAttribute("id");
		if (id !== "fix-cursor") {
			let winHeight = document.documentElement.clientHeight;
			if (document.getElementById(`keybordb_${this.state.spaceID}`)) {
				document.getElementById(`keybordb_${this.state.spaceID}`).style.height =
					(winHeight * obj.heightper) / 2 + 74 + "px";
			}
		}
		if (id === "js-fix-bug") {
			document.activeElement.scrollIntoView();
		}
	};
	InputOnChange = (key, value) => {
		this.setState({
			[key]: value
		});
	};
	toggleAgree = e => {
		if (e) {
			e.stopPropagation();
		}
		this.setState(prevState => {
			return { isRead: !prevState.isRead };
		});
	};

	saveFn = () => {
		const { idCard, userName } = this.state;
		this.props.Submit(idCard, userName);
	};
	//查看协议
	openContract = (e, path) => {
		e.stopPropagation();
		const year = new Date().getFullYear();
		const month = new Date().getMonth() + 1;
		const day = new Date().getDate();
		const { userName, idNo } = this.props.ocrInfo;
		const commonParams = {
			personName: userName,
			idCardCode: idNo,
			year,
			month,
			day
		};
		this.props.pageParams.history.push({
			pathname: path,
			params: commonParams
		});
	};
	render() {
		const { isRead } = this.state;

		const { headerBanner, userName, idCard, inputDisabled } = this.state;
		return (
			<div>
				{themeUtil.getTheme() == "yhLife" && (
					<img className="header-img" src={headerBanner} />
				)}
				{themeUtil.getTheme() == "yhLife" && (
					<div className="progress-container" style={{ height: "1.4rem" }}>
						<p className="progress-title" style={{ marginTop: ".6rem" }}>
							已填写 <em>50%</em> 最高5万元信用额度
						</p>
						<div className="progress-bg">
							<span className="progress-line" style={{ width: "50%" }}></span>
						</div>
					</div>
				)}
				<p
					className="title-p"
					style={{ marginTop: "0", lineHeight: "0.76rem" }}
				>
					请填写您的真实身份信息
				</p>
				<div className="add-bank-containers">
					<InputItem
						className="my-input"
						value={userName}
						disabled={inputDisabled}
						placeholder="请输入姓名"
						maxLength={10}
						id="js-fix-bug"
						onChange={this.InputOnChange.bind(this, "userName")}
					>
						姓名
					</InputItem>

					<InputItem
						clear
						maxLength={18}
						type="text"
						id="js-fix-bug"
						disabled={inputDisabled}
						placeholder="请输入身份证号码"
						value={idCard}
						className="my-input"
						onChange={this.InputOnChange.bind(this, "idCard")}
					>
						身份证号码
					</InputItem>
					<div className="agree-wrapper">
						<AgreeCheckbox
							circle={yhTools.isXiaoHuiFu()}
							checked={isRead}
							onChange={e => this.toggleAgree(e)}
						>
							{
								<span className="multi-line">
									<a
										onClick={e => {
											this.toggleAgree(e);
										}}
									>
										本人阅读并同意签署
									</a>
									<a
										className="font-link"
										onClick={e =>
											this.openContract(e, "/personalInformationLicense")
										}
									>
										《个人信息授权书》
									</a>
									<a
										className="font-link"
										onClick={e =>
											this.openContract(e, "/personalCreditAuthorization")
										}
									>
										《个人征信授权书》
									</a>
									<a
										onClick={e => {
											this.toggleAgree(e);
										}}
									></a>
								</span>
							}
						</AgreeCheckbox>
					</div>

					<Button
						style={{ marginTop: "0.73rem", marginBottom: "0.2rem" }}
						disabled={!this.state.isRead}
						onClick={this.saveFn}
						buttonStyle={{
							height: "1rem",
							lineHeight: "1rem"
						}}
					>
						下一步
					</Button>
					<div id={"keybordb_" + this.state.spaceID}></div>
				</div>
			</div>
		);
	}
}
export default XhfCertification;
